<template>
  <div id="app">
    <h5>欢迎光临水果店Vue开发系统</h5>
    <table class="tb">
      <!-- 单价与折扣区 -->
      <tr>
        <th><h3>苹果10￥/斤,折扣 &lt; 8折 &gt;</h3></th>
      </tr>
      <!-- 斤数 -->
      <tr>
        <td>请输入你要购买的斤数 <input type="text" placeholder="0" v-model.trim="name"></td>
      </tr>
      <tr>
        <td><button @click="weight" >结账买的~</button></td>
      </tr>
      <tr>
        <td>
          结账单:总价: <span>{{ total }}</span>￥元 折后价: <span>{{discount}}</span>￥元 省了: <span>{{save}}</span>￥元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: '',
      total: 0,
      discount: 0,
      save: 0
    }
  },
  methods: {
    weight () {
      this.total = 10 * this.name
      this.discount = this.total * 0.8
      this.save = this.total - this.discount
    }
  }
}
</script>

<style scoped lang='less'>
#app {
  width: 600px;
  margin: 10px auto;
}
.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>
